<template>
  <div class="cardData paymentUser">
    <div class="breadcrumbNav">
      <!--<crumbList :navList="navList"></crumbList>-->
      <el-select v-model="searchData.cityCode" filterable placeholder="请选择城市" @change="topCalendarsChange">
        <el-option v-for="item in cityCodeList" :label="item.moduleName" :value="item.modulePath" :key="item.modulePath"></el-option>
      </el-select>
      <i class="fa fa-refresh" aria-hidden="true" @click="reload" title="刷新"></i>
    </div>
    <div class="card-data-title">
      <ul>
        <li v-for="(item, index) in topTotal" :key="index">
          <div class="top">
            <i :class="item.titleIcon"></i><span class="headerFont">{{item.title}}</span>
          </div>
          <div class="middle">
            {{item.content}}
          </div>
          <div class="botBox">
            <i v-if="item.up" class="fa fa-caret-up" :class="{red: item.up, green: !item.up}"></i><i v-else class="fa fa-caret-down" :class="{red: item.up, green: !item.up}"></i><span class="percent" :class="{red: item.up, green: !item.up}">{{item.yesterdaypercent}}</span><span class="bottomFont">{{item.yesterdayBottomFont}}</span>
          </div>
        </li>
      </ul>
    </div>
    <div class="card-data-line">
      <div class="search">
        <div class="left">
          <el-radio-group v-model="searchData.searchType">
            <el-radio-button label="0">条件查询</el-radio-button>
            <el-radio-button label="1">对比分析</el-radio-button>
          </el-radio-group>
          <el-radio-group v-model="searchData.paymentType">
            <el-radio-button label="0">全部</el-radio-button>
            <el-radio-button label="1">支付宝</el-radio-button>
            <el-radio-button label="2">微信</el-radio-button>
            <el-radio-button label="3">其他商户</el-radio-button>
          </el-radio-group>
        </div>
        <div class="right">
          <el-radio-group v-model="searchData.calendars" v-if="searchData.searchType === '0'">
            <el-radio-button label="1">昨日</el-radio-button>
            <el-radio-button label="2">上周</el-radio-button>
            <el-radio-button label="3">上月</el-radio-button>
          </el-radio-group>
          <el-date-picker  v-model="dateTimeScope"  type="daterange"  placeholder="请选择时间范围" align="right" @input="dateScopeChange" v-show="searchData.searchType === '0'"></el-date-picker>
          <el-button class="searchBtn" @click="getCardData" v-show="searchData.searchType === '0'">查询</el-button>
          <el-radio-group v-model="searchData.userType" v-show="searchData.searchType === '1'">
            <el-radio-button label="newUser">新用户</el-radio-button>
            <el-radio-button label="oldUser">老用户</el-radio-button>
          </el-radio-group>
          <el-date-picker  v-model="searchData.timeOne"  type="date"  placeholder="请选择对比日期A" align="right" @input="dateChange(searchData.timeOne, 'A')" v-show="searchData.searchType === '1'"></el-date-picker>
          <el-date-picker  v-model="searchData.timeTwo"  type="date"  placeholder="请选择对比日期B" align="right" @input="dateChange(searchData.timeTwo, 'B')" v-show="searchData.searchType === '1'"></el-date-picker>
          <el-button class="searchBtn" @click="getCompareResult" v-show="searchData.searchType === '1'">对比</el-button>
        </div>
      </div>
      <div class="line" v-loading="paymentUserBarLoading" element-loading-text="加载中...">
        <div v-show="searchData.searchType === '0'"  id="paymentUserBar" style="height: 600px"></div>
        <div v-show="searchData.searchType === '1' && searchData.userType === 'newUser'" id="newUserCompareBar" style="height: 600px"></div>
        <div v-show="searchData.searchType === '1' && searchData.userType === 'oldUser'" id="oldUserCompareBar" style="height: 600px"></div>
      </div>
    </div>
    <!--条件查询-->
    <div class="card-data-table" v-show="searchData.searchType === '0'">
      <div class="export">
        <a href="javascript:void(0)" target="_blank"><el-button type="primary" class="exportBtn" @click="exportExcelHandler">导出</el-button></a>
      </div>
      <myTable :table="table" :tableData="tableData"></myTable>
      <div class="block">
        <el-pagination layout="total, prev, pager, next, jumper"
                       @current-change="handleCurrentChange"
                       :current-page="page.pageNum"
                       :page-size="page.pageSize"
                       :total="page.total">
        </el-pagination>
      </div>
    </div>
    <!--对比分析新用户-->
    <div class="card-data-table" v-show="searchData.searchType === '1' && searchData.userType === 'newUser'">
      <div class="export">
        <a href="javascript:void(0)" target="_blank"><el-button type="primary" class="exportBtn" @click="exportExcelHandler">导出</el-button></a>
      </div>
      <myTable :table="newTable" :tableData="tableData"></myTable>
      <div class="block">
        <el-pagination layout="total, prev, pager, next, jumper"
                       @current-change="handleCurrentChange"
                       :current-page="page.pageNum"
                       :page-size="page.pageSize"
                       :total="page.total">
        </el-pagination>
      </div>
    </div>
    <!--对比分析老用户-->
    <div class="card-data-table" v-show="searchData.searchType === '1' && searchData.userType === 'oldUser'">
      <div class="export">
        <a href="javascript:void(0)" target="_blank"><el-button type="primary" class="exportBtn" @click="exportExcelHandler">导出</el-button></a>
      </div>
      <myTable :table="oldTable" :tableData="tableData"></myTable>
      <div class="block">
        <el-pagination layout="total, prev, pager, next, jumper"
                       @current-change="handleCurrentChange"
                       :current-page="page.pageNum"
                       :page-size="page.pageSize"
                       :total="page.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapState, mapActions } from 'vuex'
  import crumbList from '../../common/crumbList.vue'
  import myTable from '../../common/myTable.vue'
  import setDate from '../../../../utils/setDate'
  import cardData from '../../../../utils/getCardTotal'
  import api from '../../../../api/index'
  import ajax from '../../../../utils/ajax'
  import {handleChartData, handleChartDataCompare} from './js/handleChartData'
  export default {
    components: {crumbList, myTable},
    data () {
      return {
        navList: [
          {name: '用户分析', path: ''},
          {name: '支付用户', path: ''}
        ],
        topTotal: [],
        searchData: {
          cityCode: '', // 城市选择
          paymentType: '0',
          calendars: '1',
          startTime: '',
          endTime: '',
          timeOne: '',
          timeTwo: '',
          searchType: '0',
          userType: 'newUser'
        },
        dateTimeScope: '', // 时间范围
        paymentUserBarLoading: false
      }
    },
    computed: {
      ...mapState('moduleItem', [
        'cityCode',
        'cityCodeList', // 城市编码
        'table',
        'tableData',
        'tableDataTotal',
        'page',
        'newTable',
        'oldTable'
      ])
    },
    mounted () {
      this.searchData.cityCode = this.cityCode
      this.getTopTotal({url: api.paymentUserData.total, params: {cityCode: this.searchData.cityCode}})
      this.getCardData()
    },
    methods: {
      ...mapActions('moduleItem', ['setCityCode', 'setPage', 'setTableData', 'setTableDataTotal', 'setTable', 'setNewTable', 'setOldTable']),
      getTopTotal (obj) { // 顶部汇总
        let that = this
        ajax.get(obj.url, obj.params).then((res) => {
          let data = res.data
          that.topTotal = that.$formatNumber(data) // 数字加千分位
        })
      },
      dateScopeChange (val) {
        this.searchData.startTime = setDate(val[0])
        this.searchData.endTime = setDate(val[1])
      },
      dateChange (val, type) {
        if (type === 'A') {
          this.searchData.timeOne = setDate(val)
        } else {
          this.searchData.timeTwo = setDate(val)
        }
      },
      reload () {
        window.location.reload()
      },
      topCalendarsChange () {
        this.setCityCode(this.searchData.cityCode)
        this.getTopTotal({url: api.paymentUserData.total, params: {cityCode: this.searchData.cityCode}})
        this.getCardData()
      },
      handleCurrentChange (val) {
        let that = this
        that.setPage({pageNum: val, pageSize: 10, total: that.tableDataTotal.length})
        let tableData = []
        let arrlen = val * that.page.pageSize <= that.tableDataTotal.length ? that.page.pageSize : that.tableDataTotal.length - that.page.pageSize * (val - 1)
        for (let i = 0; i < arrlen; i++) {
          let temp = i + that.page.pageSize * (val - 1)
          tableData.push(that.tableDataTotal[temp])
        }
        that.setTableData(tableData)
      },
      getCardData () {
        let that = this
        let params = {
          cityCode: that.searchData.cityCode, // 城市选择
          paymentType: that.searchData.paymentType,
          calendars: that.searchData.calendars,
          startTime: that.searchData.startTime,
          endTime: that.searchData.endTime
        }
        that.paymentUserBarLoading = true
        ajax.get(api.paymentUserData.result, params).then((res) => {
          let code = res.msg.code
          if (code === '20000') {
            let data = res.data.list
            let headerData = res.data.tableHeaders === undefined ? [] : res.data.tableHeaders
            that.setTableDataTotal(data)
            that.setTable(headerData)
            that.handleCurrentChange(1)
            let {legendData, xAxisData, seriesData} = handleChartData(headerData, data)
            cardData(true, legendData, xAxisData, seriesData, 'paymentUserBar')
          } else {
            this.$message({type: 'error', message: res.msg.message})
          }
          that.paymentUserBarLoading = false
        }).catch((err) => {
          if (err) throw err
          that.paymentUserBarLoading = false
        })
      },
      getCompareResult () {
        if (this.searchData.timeOne === '' || this.searchData.timeTwo === '') {
          this.$message({type: 'info', message: '请选择对比日期'})
          return
        }
        if (this.searchData.searchType === '1' && this.searchData.userType === 'newUser') {
          this.getNewUserPayment()
        } else {
          this.getOldUserPayment()
        }
      },
      getNewUserPayment () {
        let that = this
        let params = {
          cityCode: that.searchData.cityCode, // 城市选择
          paymentType: that.searchData.paymentType,
          userType: that.searchData.userType,
          timeOne: that.searchData.timeOne,
          timeTwo: that.searchData.timeTwo
        }
        that.paymentUserBarLoading = true
        ajax.get(api.paymentUserData.compare, params).then((res) => {
          let code = res.msg.code
          if (code === '20000') {
            let data = res.data.list
            let headerData = res.data.tableHeaders
            that.setTableDataTotal(data)
            that.setNewTable(headerData)
            that.handleCurrentChange(1)
            let {legendData, xAxisData, seriesData} = handleChartDataCompare(headerData, data)
            cardData(true, legendData, xAxisData, seriesData, 'newUserCompareBar')
          } else {
            this.$message({type: 'error', message: res.msg.message})
          }
          that.paymentUserBarLoading = false
        }).catch((err) => {
          if (err) throw err
          that.paymentUserBarLoading = false
        })
      },
      getOldUserPayment () {
        let that = this
        let params = {
          cityCode: that.searchData.cityCode, // 城市选择
          paymentType: that.searchData.paymentType,
          userType: that.searchData.userType,
          timeOne: that.searchData.timeOne,
          timeTwo: that.searchData.timeTwo
        }
        that.paymentUserBarLoading = true
        ajax.get(api.paymentUserData.compare, params).then((res) => {
          let code = res.msg.code
          if (code === '20000') {
            let data = res.data.list
            let headerData = res.data.tableHeaders
            that.setTableDataTotal(data)
            that.setOldTable(headerData)
            that.handleCurrentChange(1)
            let {legendData, xAxisData, seriesData} = handleChartDataCompare(headerData, data)
            cardData(true, legendData, xAxisData, seriesData, 'oldUserCompareBar')
          } else {
            this.$message({type: 'error', message: res.msg.message})
          }
          that.paymentUserBarLoading = false
        }).catch((err) => {
          if (err) throw err
          that.paymentUserBarLoading = false
        })
      },
      exportExcelHandler () { // 导出excel
        let url = this.searchData.searchType === '0' ? api.paymentUserData.export : api.paymentUserData.compareExport
        let params = this.searchData
        this.$exportExcel(url, params)
      }
    }
  }
</script>
